<template>
  <div>
    <el-card class="searchTop">
      <!-- 步骤条 -->
      <el-steps style="width: 80%; margin: 20px auto" :active="active">
        <el-step title="待付款" :description="orderList.createTime"></el-step>
        <el-step title="待发货" :description="orderList.paymentTime"></el-step>
        <el-step title="已发货" :description="orderList.deliveryTime"></el-step>
        <el-step title="已完成" :description="orderList.receiveTime"></el-step>
        <el-step title="已关闭" :description="orderList.finishTime"></el-step>
      </el-steps>
      <div class="el-deliver"></div>

      <!-- 订单信息 -->
      <div class="orderInfo">
        订单信息
        <span :style="styleObj" class="orderState">{{ orderState }}</span>
      </div>
      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>订单金额:</span>
          <span style="color: red; margin-left: 10px">{{
            orderList.totalAmount
          }}</span>
        </el-col>
        <el-col :span="6">
          <span>订单编号:</span>
          <span style="margin-left: 10px">{{ orderList.orderSn }}</span>
        </el-col>
        <el-col :span="6">
          <span>用户账号:</span>
          <span style="margin-left: 10px">{{ orderList.memberUsername }}</span>
        </el-col>
        <el-col :span="6">
          <span>备注:</span>
          <span style="margin-left: 10px">{{ orderList.totalAmount }}</span>
        </el-col>
      </el-row>

      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>下单时间:</span>
          <span style="color: red; margin-left: 10px">{{
            orderList.createTime
          }}</span>
        </el-col>
        <el-col :span="6">
          <span>付款时间:</span>
          <span style="margin-left: 10px">{{ orderList.paymentTime }}</span>
        </el-col>
        <el-col :span="6">
          <span>发货时间:</span>
          <span style="margin-left: 10px">{{ orderList.deliveryTime }}</span>
        </el-col>
        <el-col :span="6">
          <span>收货时间:</span>
          <span style="margin-left: 10px">{{ orderList.receiveTime }}</span>
        </el-col>
      </el-row>

      <div class="el-deliver"></div>

      <!-- 收货人信息 -->
      <div class="orderInfo">收货人信息</div>
      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>收货人:</span>
          <span style="margin-left: 10px">{{ orderList.receiverName }}</span>
        </el-col>
        <el-col :span="6">
          <span>用户姓名:</span>
          <span style="margin-left: 10px">{{ orderList.memberUsername }}</span>
        </el-col>
        <el-col :span="6">
          <span>手机号码:</span>
          <span style="margin-left: 10px">{{ orderList.receiverPhone }}</span>
        </el-col>
        <el-col :span="6">
          <span>邮政编码:</span>
          <span style="margin-left: 10px">{{ orderList.receiverPostCode }}</span>
        </el-col>
      </el-row>


      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>地市:</span>
          <span style="margin-left: 10px">{{ orderList.receiverProvince }} {{orderList.receiverCity}}</span>
        </el-col>
        <el-col :span="6">
          <span>详细地址:</span>
          <span style="margin-left: 10px">{{ orderList.receiverDetailAddress }}</span>
        </el-col>
      </el-row>

      <div class="el-deliver"></div>
      <!-- 商品信息  -->
      <div class="orderInfo">商品信息</div>
      <el-table
        :data="proList"
        border
        style="width: 100%">
        <el-table-column
          prop="productName"
          align="center"
          label="商品名称"
          width="300">
        </el-table-column>

        <el-table-column
          label="商品图片"
          align="center"
          width="180">
          <template slot-scope="scope">
            <img style="width:100px;height:100px;" :src="scope.row.productPic" alt="">
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          align="center"
          label="是否退货">
          <template slot-scope="scope">
            <div v-if="scope.row.isReturn==1">是</div>
            <div v-if="scope.row.isReturn==0">否</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="productBrand"
          align="center"
          label="品牌">
        </el-table-column>

        <el-table-column
          prop="productPrice"
          align="center"
          label="价格">
        </el-table-column>

        <el-table-column
          prop="productQuantity"
          align="center"
          label="商品数量">
        </el-table-column>

        <el-table-column
          prop="totalPrice"
          align="center"
          label="小计">
        </el-table-column>
      </el-table>

      <!-- 费用信息 -->
      <div class="orderInfo">费用信息</div>

      <el-row type="flex" justify="start">
        <el-col :span="6">
          <span>运费金额:</span>
          <span style="margin-left: 10px">0</span>
        </el-col>
        <el-col :span="6">
          <span>订单总金额:</span>
          <span style="margin-left: 10px">{{ orderList.totalAmount }}</span>
        </el-col>
        <el-col :span="6">
          <span>实际金额:</span>
          <span style="margin-left: 10px">{{ orderList.totalAmount }}</span>
        </el-col>
        <el-col :span="6">
          <span>促销优化金额:</span>
          <span style="margin-left: 10px">0</span>
        </el-col>
      </el-row>

      <div class="el-deliver"></div>
      <!-- 物流信息 -->
      <!-- 未发货,填写物流信息 -->
      <div v-if="active==2">
        <el-form  style="padding-bottom:50px;" :rules="rules" ref="ruleForm" :model="deliverForm" label-position='left' label-width="100px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="物流公司" prop="name">
                <el-select size="mini" v-model="deliverForm.deliveryCompany" placeholder="请选择活动区域">
                  <el-option label="顺丰快递" value="顺丰快递"></el-option>
                  <el-option label="韵达快递" value="韵达快递"></el-option>
                  <el-option label="中国邮政" value="中国邮政"></el-option>
                  <el-option label="申通快递" value="申通快递"></el-option>
                  <el-option label="中通快递" value="中通快递"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物流单号" prop="name">
                <el-input size="mini" v-model="deliverForm.deliverySn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center" style="margin-top:30px;">
            <el-button type="primary" @click="submitDelilver('ruleForm')">确认发货</el-button>
          </el-row>
          
        </el-form>

      </div>

      <!-- 已发货,显示物流信息 -->
      <div v-if="active>2">
        <div class="orderInfo">物流信息: <span style="color:gray;">{{orderList.deliveryCompany}}[{{orderList.deliverySn}}]</span></div>

          <el-table
            :data="deliverData"
            stripe
            border
            style="width: 100%">
            <el-table-column
              prop="AcceptTime"
              label="时间"
              width="300">
            </el-table-column>
            <el-table-column
              prop="AcceptStation"
              label="状态"
              width="800">
            </el-table-column>
            <el-table-column
              prop="Remark"
              label="备注"
              width="500">
            </el-table-column>
          </el-table>
      </div>
      <!-- 已收货,完成订单 -->
      <div v-if="active==4" style="margin-top:30px;text-align:center;">
        <el-button type="primary" @click="shutOrder">关闭订单</el-button>
      </div>
    </el-card>
  </div>
</template>


<script ></script>
<script>
import {sendDone,finishOrder,orderDetail} from '@/api/order/orderList';
import data from '@/views/order/orderList/seeOrder/data.json';
export default {
  data() {
    return {
      //订单信息后的快递状态css样式
      styleObj: {
        display: 'inline-block',
        backgroundColor: 'blue',
        padding: '0 8px',
        color: '#fff',
        marginLeft: '10px',
        height: '24px',
        lineHeight: '22px',
        borderRadius: '4px',
        fontSize: '12px'
      },
      //传过来的Id
      id: '',
      //订单数据明细
      orderList: [],
      //商品数据明细
      proList: [],
      //步骤条
      active: 0,
      //订单状态
      orderState: '',
      //快递信息
      deliverData:[],
      //物流信息上传
      deliverForm:{
        deliveryCompany:'',
        deliverySn:''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getOrder()
    this.deliverData = data.Traces
    console.log(this.deliverData);
  },
  methods: {
    //获得订单明细
    getOrder() {
      orderDetail(this.id).then((res) => {
        console.log(res)
        this.orderList = res.data.orderDetail.orderBase
        this.proList = res.data.orderDetail.orderItems
        this.active = res.data.orderDetail.orderBase.status + 1
        if (this.active == 1) {
          this.orderState = '待付款'
          this.styleObj.backgroundColor = '#f56c6c'
        } else if (this.active == 2) {
          this.orderState = '待发货'
          this.styleObj.backgroundColor = '#e6a23c'
        } else if (this.active == 3) {
          this.orderState = '已发货'
          this.styleObj.backgroundColor = '#ecf5ff'
          this.styleObj.color = '#409eff'
        } else if (this.active == 4) {
          this.orderState = '已完成'
          this.styleObj.backgroundColor = ' #409eff'
        } else if (this.active == 5) {
          this.orderState = '已关闭'
          this.styleObj.backgroundColor = '#909399'
        }
      })
    },
    //确认发货
    submitDelilver(val){
      sendDone({
        deliveryCompany:this.deliverForm.deliveryCompany,
        deliverySn:this.deliverForm.deliverySn,
        orderId:this.orderList.id
      }).then(res=>{
        console.log(res);
      })
      this.getOrder()
    },
    //关闭订单
    shutOrder(){
      finishOrder(this.orderList.id).then(res=>{
        console.log(res);
      })
      this.getOrder()
    }
  }
}
</script>


<style lang='scss' scoped>
.el-col {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}
//分割线
.el-deliver {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
}
// 小标题
.orderInfo {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  margin: 20px 0;
}
</style>